<ui:fragment  
    xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:ui="http://java.sun.com/jsf/facelets"  
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" 
    xmlns:f="http://java.sun.com/jsf/core">
    
<div id="toppanel">
	<c:if test="#{!loginBean.logado}">
	<div id="panel">
 
		<div class="content clearfix">
			 
		<h:form>
		
			<div id="logonegativo">
					<h:graphicImage library="imagens" name="logo_negativo.png" alt="logo" height="75" width="160"/>
			</div>
			
			<div class="left">
				<!-- Login Form -->
				
					<h1>Login de Associados</h1>
								
					<h:panelGrid columns="3">
	                	<h:outputLabel value="Usuário:" for="nome" styleClass="label"/>
						<h:inputText id="log" class="field" size="12" value="#{loginBean.usuario.user}" required="true" requiredMessage="* O campo [Usuário] é obrigatório!" />
						<h:message for="log" showSummary="true" showDetail="false" class="error"/>
						
						<h:outputLabel value="Senha:" for="nome" styleClass="label"/>
						<h:inputSecret id="pwd" class="field" size="12" value="#{loginBean.usuario.senha}" required="true" requiredMessage="* O campo [Senha] é obrigatório!" />
						<h:commandButton  value="Login" styleClass="bt_login" action="#{loginBean.actionLogar}"></h:commandButton>
					</h:panelGrid>
	                    <h:selectBooleanCheckbox title="emailUpdates"></h:selectBooleanCheckbox>
						<h:outputText value="Lembrar-me?"/>	 
	                  	<a class="lost-pwd" href="#">Esqueceu a senha?</a>
									 	
			</div>
			
			
			<div id="topdireito">
				<h1>Ainda não é membro?</h1>	 <!--  --> 			
				 <a href="usuario/cadastroUsuario.xhtml">Registre-se</a>
							
			</div></h:form>
		</div>
	</div> 	
	</c:if>
	<c:if test="#{loginBean.logado}">
	<div id="panel">
 
		<div class="content clearfix">
			 
		<h:form>
		
			<div id="logonegativo">
					<h:graphicImage library="imagens" name="logo_negativo.png" alt="logo" height="75" width="160"/>
			</div>
			
			<div class="left">				
		        <h:outputLabel value="Nome: #{loginBean.usuario.nome}" styleClass="label"/><br/>
				<h:outputLabel value="email: #{loginBean.usuario.email}" styleClass="label"/><br/>
				<h:outputLabel value="email Opcional: #{loginBean.usuario.emailopcional}" styleClass="label"/><br/>
				<h:outputLabel value="Usuario: #{loginBean.usuario.user}" styleClass="label"/>
			</div>
			<div id="topdireito">
				<h1>Bom dia!</h1>
				<h:commandLink rendered="#{loginBean.usuario.user.equals('administrador')}" value="Administrar Site" action="#{loginBean.administrarSite}"></h:commandLink><br/>
				<h:commandLink value="Sair(logout)" action="#{loginBean.sair}"></h:commandLink>				
			</div></h:form>
		</div>
	</div> 		
	</c:if>
	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left"></li>
			<li>Olá</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">
					<c:if test="#{!loginBean.logado}">
						Login | Registrar
					</c:if>
					<c:if test="#{loginBean.logado}">
						#{loginBean.usuario.nome}
					</c:if>  
					
				</a>
				<a id="close" style="display: none;" class="close" href="#">Fechar Painel</a>			
			</li>
			<li class="right"></li>
			
		</ul> 
	</div> 
	
	<!-- / top -->
	
</div> <!--panel -->
<div class="container">
    <div id="logo"><h:graphicImage library="imagens" name="logo.png" alt="logo"/> 
    	     <h:form id="busca">
					<h:inputText id="nome" class="inputbusca"  value="Busca.." onblur="if(this.value == '') {this.value = 'Busca..';}" onfocus="if(this.value == 'Busca..') {this.value = '';}" size="40"></h:inputText>

					<h:commandButton class="botaobusca"></h:commandButton>	

					

		   	 </h:form>
    </div> 	
    <div id="header">
    	<h:form style="Float:left;">
        <ul class="topnav">
            <li><h:commandLink action="#{usuarioBean.index}">Home</h:commandLink></li>
            <li>
                <a href="#">Concursos</a>
                <ul class="subnav">
                	<li><a href="#">Nacional</a></li>
                    <li><a href="#">Região Norte</a></li>
                    <li><a href="#">Região Nordeste</a></li>
                    <li><a href="#">Região Sudeste</a></li>
                    <li><a href="#">Região Centro-Oeste</a></li>
                </ul>
            </li>
           
            <li><a href="#">Simulado</a></li>     
            <li><a href="#">Sobre o Site</a></li>
            <li><h:commandLink action="#{usuarioBean.quemSomos}" value="Quem Somos"/></li>
            <li><h:commandLink action="#{forumBean.index}" value="Fórum" rendered="#{loginBean.logado}" /></li>
            <li><h:commandLink action="#{managedBean.index}" value="Estatisticas" rendered="#{loginBean.logado}" /></li>
        </ul>                
        </h:form>
        <div style="Float:right;" id="imgSocial">
    	    <a id="propaganda" href="http://www.facebook.com.br"><h:graphicImage library="imagens/rodape" name="facebook.png" cssclass="imgSocial" alt="Facebook" height="30" width="30"/> </a>
	        <a id="propaganda" href="http://www.twitter.com"><h:graphicImage library="imagens/rodape" name="twitter-logo.png" cssclass="imgSocial" alt="Twitter" height="30" width="30"/> </a>
        </div>
    </div>
</div>
</ui:fragment>